<template>
  <div>
    <div class="video-container">
      <div class="video-top">
        <el-link
          type="info"
          @click="GoVideoDetail"
          :underline="false"
          class="title"
          >{{ video.video_title }}</el-link
        >
        <span class="create_time">{{ video.create_time | formatDate }}</span>
      </div>
      <div class="video-center">
        <span v-html="video.video_abstract"></span>
      </div>
      <div class="video-bottom">
        <div class="info-list">
          <span class="view">阅读 {{ video.view_count }}</span>
          <span class="view">点赞: {{ video.like_count }}</span>
          <span class="view">评论: {{ video.comment_count }}</span>
        </div>
        <div class="options">
          <el-button class="CustomBtn" @click="GoVideoDetail">浏览</el-button>
          <el-button class="CustomBtn" @click="EditVideo">编辑</el-button>
          <el-button class="CustomBtn" @click="deleteVideo">删除</el-button>
        </div>
        <div></div>
      </div>
    </div>
    <PublishDialog
      :data="EditForm"
      type="video"
      dialogTitle="编辑视频"
      :visible="EditDialogVisible"
      @custom-confirm="EditConfirm"
      @custom-close="EditDialogClose"
    />
  </div>
</template>

<script>
import PublishDialog from '@/components/Tools/PublishDialog'
export default {
  props: {
    video: {
      type: Object,
      required: true
    }
  },
  components: {
    PublishDialog
  },
  data() {
    return {
      currentvideo: {},
      EditDialogVisible: false,
      EditForm: {}
    }
  },
  computed: {},
  watch: {
    // 更换props参数到data
    video: {
      immediate: true,
      deep: true,
      handler(val, oldval) {
        this.currentvideo = val
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    async EditConfirm(formData) {
      console.log(formData)
      const datas = this.$qs.stringify(formData)
      const res = await this.$API.video.alterVideo(datas)
      if (res.status == 200) {
        this.EditDialogVisible = false
        this.$message.success('修改成功')
        this.$bus.$emit('ReloadVideoList')
      }
    },
    EditDialogClose() {
      this.EditDialogVisible = false
    },
    EditVideo() {
      const { currentvideo } = this
      this.EditForm = {
        video_id: currentvideo.id,
        title: currentvideo.video_title,
        img_url: currentvideo.img_url
      }
      this.EditDialogVisible = true
    },
    handleCancel() {},
    // 浏览功能
    GoVideoDetail() {
      this.$router.push({ name: 'VideoDetail', params: { id: this.video.id } })
    },
    // 删除功能
    deleteVideo() {
      let formData = new FormData()
      formData.append('video_id', this.video.id)
      this.$confirm('此操作将永久删除该视频, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await this.$API.video.deleteVideo(formData)
          console.log(res)
          if ((res.status = 200)) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            // 发送事件
            this.$bus.$emit('DeleteVideoSuccess')
          } else {
            this.message.error(res.msg)
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleCommand(c) {
      // 子标签选择判断
      switch (c) {
        case 'delete':
          this.deleteVideo()
          break
      }
    }
  }
}
</script>

<style scoped>
.video-container {
  line-height: 2em;
}
.video-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.title {
  font-size: 16px;
  color: #55596b;
}
.create_time {
  color: #9f9f9c;
}
.video-center {
  width: 100%;
  color: #9fa2af;
}
.video-bottom {
  width: 100%;
  display: flex;
  flex-direction: space-between;
}

.info-list {
  width: 50%;
  color: #999aad;
}
.info-list span {
  margin-right: 10px;
}
.options {
  width: 50%;
  display: flex;
  justify-content: right;
}
.options * {
  margin-left: 10px;
}
</style>
